<template>
	<view class="page_bg_FAFAFA">
		<view class="top-bg cr-fff flex align-center flex-direction padd-top40">
			<view class="font_s36 font_w500 line-height100">
				总学分
			</view>
			<view class="font_s66 line-height100 mar-top50">
				{{userInfo.score || 0}}
			</view>
		</view>
		<navigator url="/subPages/creditMall/creditMall" hover-class="" class="flex duih-box align-center justify-between">
			<view class="flex align-center">
				<image src="/static/img/icon_liwu.png" class="w-88 h-82"></image>
				<text class="cr-333 font_s32 mar-left13">学分兑换</text>
			</view>
			<view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</navigator>
		<view class="padd-left30 padd-right30">
			<view class="credit-tasknum flex align-center justify-between">
				<view class="font_s32 cr-333 font_w600">
					学分任务
				</view>
				<view >
					<text class="cr-333 font_s26">今日累计</text>
					<text class="mar-left20 cr-FA312A font_s30">{{dayNum}}学分</text>
				</view>
			</view>
			<view class="mar-top22">
				<view v-for="(item,index) in taskList" :key="index" class="task-list-item">
					<view class="cr-333 font_s32 font_w600 line-height100">
						{{item.title}}
					</view>
					<view class="cr-999 font_s24 line-height100 mar-top18">
						{{item.desc}}
					</view>
					<block v-if="item.sourceType != 6">
						<view class="cr-999 font_s24 line-height100 mar-top11">
							{{item.tips}}
						</view>
						<view class="flex justify-between align-center mar-top20">
							<view class="progress-box">
								<view class="progress_line" :style="{width:`${item.process}%`}">
									
								</view>
							</view>
							<view class="font_s28">
								<text class="cr-FA312A">{{item.totalNumber}}分</text>
								<text class="cr-999">/{{item.limitNumber}}分</text>
							</view>
						</view>
					</block>					
					<view class="btn-abl">
						<view v-if="item.isSuccess" class="success">
							已完成
						</view>
						<view v-else @click="clickJump(item)" class="jump-look">
							{{item.btnTxt}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<t-sign v-model="signShow"></t-sign>
	</view>
</template>

<script>
	const app = getApp().globalData
	export default {
		data() {
			return {
				taskList:[],
				dayNum:0,
				userInfo:app.userInfo,
				signShow:false
			};
		},
		onLoad() {
			this.getUserScoreDaily()
		},
		methods:{
			getUserScoreDaily(){
				this.$http.get('/yaolexue-service-portal/scoreRecord/userScoreDaily',{
					
				}).then(res => {
					if(res.code == 200){
						this.taskList = res.data.filter(item => item.sourceType != 7).map(item => {
							let data = this.listItem(item)
							return {
								...item,
								...data
							}
						})
						this.dayNum = this.taskList.reduce((total,val) => total + val.totalNumber ,0)
						console.log(this.taskList)
					}
				})
			},
			clickJump(item){
				let url = ''
				switch (item.sourceType){
					case 1:
						url = '/pages/MedicalArticle/MedicalArticle'
						uni.switchTab({
							url:url
						})
					case 2:
						url = '/pages/MedicalVideo/MedicalVideo'
						uni.switchTab({
							url:url
						})
					case 3:
						url = '/pages/MedicalAudio/MedicalAudio'
						uni.switchTab({
							url:url
						})
					break;
					case 4:
						this.signShow = true
					break;
					case 5:
						uni.switchTab({
							url:'/pages/MedicalArticle/MedicalArticle'
						})
					break;
					case 6:
						uni.navigateTo({
							url:'/subPages/qrcodeCard/qrcodeCard'
						})
					break;
				}
			},
			listItem(item){
				let data = {
					title:'',
					desc:''
				}
				switch (item.sourceType){
					case 1:
						data = {
							title: '我要选读文章',
							desc:`${item.singleNumber}分/每日看文章`,
						}
					break;
					case 2:
						data = {
							title: '我要看视频',
							desc:`${item.singleNumber}分/每日看视频`,
						}
					break;
					case 3:
						data = {
							title: '我要听音频',
							desc:`${item.singleNumber}分/每日听音频`,
						}
					break;
					case 4:
						data = {
							title: '签到',
							desc:`${item.singleNumber}分/每日首次签到`,
						}
					break;
					case 5:
						data = {
							title: '分享',
							desc:`${item.singleNumber}分/每日分享平台视频、音频、图文`,
						}
					break;
					case 6:
						data = {
							title: '介绍小伙伴',
							desc:`${item.singleNumber}分/分享二维码让小伙伴注册`,
						}
					break;
				}
				return {
					...data,
					tips:item.sourceType == 5 ? '' : `每日上限${item.limitNumber}分`,
					process:(item.totalNumber / item.limitNumber) * 100,
					isSuccess:item.sourceType == 6 ? false : item.totalNumber >= item.limitNumber,
					btnTxt:item.sourceType == 5 ? '去分享' : item.sourceType == 6 ? '去转发' : '去看看'
				}
			}
		}
	}
</script>

<style lang="scss" scoped> 
	.top-bg{
		position: relative;
		overflow: hidden;
		height: 300rpx;
		width: 100%;
		background: #fff;
		z-index: 2;
		&::after{
			content: "";
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			background: #FA312A;
			height: 255rpx;
			z-index: -1;
		}
		&::before{
			content: "";
			display: block;
			position: absolute;
			bottom: 0;
			left: -10%;
			width: 120%;
			height: 80rpx; /* 调整这个值来改变弧形的高度 */
			border-radius: 0 0 50% 50%; /* 调整这个值来改变弧形的半径 */
			background: #FA312A;
		}
	}
	.duih-box{
		width: 689rpx;
		height: 136rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: -76rpx auto 0 auto;
		position: relative;
		z-index: 3;
		padding: 0 30rpx 0 62rpx;
	}
	.credit-tasknum{
		padding: 31rpx 0;
		border-bottom: 1rpx solid #E1E1E1;
		margin-top: 26rpx;
	}
	.task-list-item{
		padding: 29rpx 0 30rpx 0;
		border-bottom: 1rpx solid #E1E1E1;
		position: relative;
		.progress-box{
			width: 571rpx;
			height: 20rpx;
			background: #E1E1E1;
			border-radius: 10rpx;
			position: relative;
			overflow: hidden;
			.progress_line{
				height: 100%;
				background: linear-gradient(93deg, #FC4949 0%, #EB561C 99%);
				border-radius: 10rpx;
				position: absolute;
				top: 0;left: 0;
			}
		}
		.btn-abl{
			position: absolute;
			top: 45rpx;
			right: 0;
			.success{
				width: 104rpx;
				height: 55rpx;
				background: #F2F3F5;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #333333;
			}
			.jump-look{
				width: 104rpx;
				height: 55rpx;
				background: #E4B010;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
</style>
